<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
<div class="page-group">
    <div id="page-infinite-scroll-bottom" class="page page-current">

        <header class="bar bar-nav">
            <h1 class="title">底部无限滚动</h1>
        </header>
        <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
        <!--<div class="content">
            <div class="infinite-scroll infinite-scroll-bottom" data-distance="50">
                <div class="list-block">
                    <ul class="list-container">
                    </ul>
                </div>
                &lt;!&ndash; 加载提示符 &ndash;&gt;
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>
        </div>-->
        <div class="content infinite-scroll native-scroll" data-distance="100">
            <div class="list-block">
                <ul class="list-container">
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                </ul>
            </div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader">
                <div class="preloader">
                </div>
            </div>
        </div>

    </div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script>

   $(function () {
       'use strict';

       //下拉刷新页面
       $(document).on("pageInit", "#page-ptr", function(e, id, page) {
           var $content = $(page).find(".content").on('refresh', function(e) {
               // 模拟2s的加载过程
               setTimeout(function() {
                   var cardHTML = '<div class="card">' +
                       '<div class="card-header">标题</div>' +
                       '<div class="card-content">' +
                       '<div class="card-content-inner">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容' +
                       '</div>' +
                       '</div>' +
                       '</div>';

                   $content.find('.card-container').prepend(cardHTML);
                   // $(window).scrollTop(0);
                   // 加载完毕需要重置
                   $.pullToRefreshDone($content);
               }, 2000);
           });
       });

       //无限滚动
       $(document).on("pageInit", "#page-infinite-scroll-bottom", function(e, id, page) {
           var loading = false;
           // 每次加载添加多少条目
           var itemsPerLoad = 20;
           // 最多可加载的条目
           var maxItems = 100;
           var lastIndex = $('.list-container li').length;
           function addItems(number, lastIndex) {
               // 生成新条目的HTML
               var html = '';
               for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                   html += '<li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>';
               }
               // 添加新条目
               $('.infinite-scroll .list-container').append(html);
           }
           $(page).on('infinite', function() {
               // 如果正在加载，则退出
               if (loading) return;
               // 设置flag
               loading = true;
               // 模拟1s的加载过程
               setTimeout(function() {
                   // 重置加载flag
                   loading = false;
                   if (lastIndex >= maxItems) {
                       // 加载完毕，则注销无限加载事件，以防不必要的加载
                       $.detachInfiniteScroll($('.infinite-scroll'));
                       // 删除加载提示符
                       $('.infinite-scroll-preloader').remove();
                       return;
                   }
                   addItems(itemsPerLoad,lastIndex);
                   // 更新最后加载的序号
                   lastIndex = $('.list-container li').length;
                   $.refreshScroller();
               }, 1000);
           });
       });

       //顶部无限滚动
       $(document).on("pageInit", "#page-infinite-scroll-top", function(e, id, page) {
           function addItems(number, lastIndex) {
               // 生成新条目的HTML
               var html = '';
               for (var i = lastIndex+ number; i > lastIndex ; i--) {
                   html += '<li class="item-content"><div class="item-inner"><div class="item-title">条目'+i+'</div></div></li>';
               }
               // 添加新条目
               $('.infinite-scroll .list-container').prepend(html);

           }
           var timer = false;
           $(page).on('infinite', function() {
               var lastIndex = $('.list-block li').length;
               var lastLi = $(".list-container li")[0];
               var scroller = $('.infinite-scroll-top');
               var scrollHeight = scroller[0].scrollHeight; // 获取当前滚动元素的高度
               // 如果正在加载，则退出
               if (timer) {
                   clearTimeout(timer);
               }

               // 模拟1s的加载过程
               timer = setTimeout(function() {

                   addItems(20,lastIndex);

                   $.refreshScroller();
                   //  lastLi.scrollIntoView({
                   //     behavior: "smooth",
                   //     block:    "start"
                   // });
                   // 将滚动条的位置设置为最新滚动元素高度和之前的高度差
                   scroller.scrollTop(scroller[0].scrollHeight - scrollHeight);
               }, 1000);
           });

       });
       //test demo js

       //多个标签页下的无限滚动
       $(document).on("pageInit", "#page-fixed-tab-infinite-scroll", function(e, id, page) {
           var loading = false;
           // 每次加载添加多少条目
           var itemsPerLoad = 20;
           // 最多可加载的条目
           var maxItems = 100;
           var lastIndex = $('.list-container li')[0].length;
           function addItems(number, lastIndex) {
               // 生成新条目的HTML
               var html = '';
               for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                   html += '<li class="item-content""><div class="item-inner"><div class="item-title">新条目</div></div></li>';
               }
               // 添加新条目
               $('.infinite-scroll.active .list-container').append(html);
           }
           $(page).on('infinite', function() {
               // 如果正在加载，则退出
               if (loading) return;
               // 设置flag
               loading = true;
               var tabIndex = 0;
               if($(this).find('.infinite-scroll.active').attr('id') == "tab2"){
                   tabIndex = 0;
               }
               if($(this).find('.infinite-scroll.active').attr('id') == "tab3"){
                   tabIndex = 1;
               }
               lastIndex = $('.list-container').eq(tabIndex).find('li').length;
               // 模拟1s的加载过程
               setTimeout(function() {
                   // 重置加载flag
                   loading = false;
                   if (lastIndex >= maxItems) {
                       // 加载完毕，则注销无限加载事件，以防不必要的加载
                       //$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));
                       // 删除加载提示符
                       $('.infinite-scroll-preloader').eq(tabIndex).hide();
                       return;
                   }
                   addItems(itemsPerLoad,lastIndex);
                   // 更新最后加载的序号
                   lastIndex =  $('.list-container').eq(tabIndex).find('li').length;
                   $.refreshScroller();
               }, 1000);
           });
       });

       //图片浏览器
       $(document).on("pageInit", "#page-photo-browser", function(e, id, page) {
           var myPhotoBrowserStandalone = $.photoBrowser({
               photos : [
                   '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                   '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                   '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
               ]
           });
           //点击时打开图片浏览器
           $(page).on('click','.pb-standalone',function () {
               myPhotoBrowserStandalone.open();
           });
           /*=== Popup ===*/
           var myPhotoBrowserPopup = $.photoBrowser({
               photos : [
                   '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                   '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                   '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
               ],
               type: 'popup'
           });
           $(page).on('click','.pb-popup',function () {
               myPhotoBrowserPopup.open();
           });
           /*=== 有标题 ===*/
           var myPhotoBrowserCaptions = $.photoBrowser({
               photos : [
                   {
                       url: '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                       caption: 'Caption 1 Text'
                   },
                   {
                       url: '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                       caption: 'Second Caption Text'
                   },
                   // 这个没有标题
                   {
                       url: '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
                   },
               ],
               theme: 'dark',
               type: 'standalone'
           });
           $(page).on('click','.pb-standalone-captions',function () {
               myPhotoBrowserCaptions.open();
           });
       });


       //对话框
       $(document).on("pageInit", "#page-modal", function(e, id, page) {
           var $content = $(page).find('.content');
           $content.on('click','.alert-text',function () {
               $.alert('这是一段提示消息');
           });

           $content.on('click','.alert-text-title', function () {
               $.alert('这是一段提示消息', '这是自定义的标题!');
           });

           $content.on('click', '.alert-text-title-callback',function () {
               $.alert('这是自定义的文案', '这是自定义的标题!', function () {
                   $.alert('你点击了确定按钮!')
               });
           });
           $content.on('click','.confirm-ok', function () {
               $.confirm('你确定吗?', function () {
                   $.alert('你点击了确定按钮!');
               });
           });
           $content.on('click','.prompt-ok', function () {
               $.prompt('你叫什么问题?', function (value) {
                   $.alert('你输入的名字是"' + value + '"');
               });
           });
       });

       //操作表
       $(document).on("pageInit", "#page-action", function(e, id, page) {
           $(page).on('click','.create-actions', function () {
               var buttons1 = [
                   {
                       text: '请选择',
                       label: true
                   },
                   {
                       text: '卖出',
                       bold: true,
                       color: 'danger',
                       onClick: function() {
                           $.alert("你选择了“卖出“");
                       }
                   },
                   {
                       text: '买入',
                       onClick: function() {
                           $.alert("你选择了“买入“");
                       }
                   }
               ];
               var buttons2 = [
                   {
                       text: '取消',
                       bg: 'danger'
                   }
               ];
               var groups = [buttons1, buttons2];
               $.actions(groups);
           });
       });

       //加载提示符
       $(document).on("pageInit", "#page-preloader", function(e, id, page) {
           $(page).on('click','.open-preloader-title', function () {
               $.showPreloader('加载中...')
               setTimeout(function () {
                   $.hidePreloader();
               }, 2000);
           });
           $(page).on('click','.open-indicator', function () {
               $.showIndicator();
               setTimeout(function () {
                   $.hideIndicator();
               }, 2000);
           });
       });


       //选择颜色主题
       $(document).on("click", ".select-color", function(e) {
           var b = $(e.target);
           document.body.className = "theme-" + (b.data("color") || "");
           b.parent().find(".active").removeClass("active");
           b.addClass("active");
       });




       $.init();
   });

</script>
</body>
</html>
